<template>
	<div class="news">
		<h1>News组件</h1>
		<h3>上方人组件，一共
			<font color="red">{{persons.length}}</font>
			个人
		</h3>
		<button @click="handleAdd">点我获取一条新闻</button>
		<ol>
			<li v-for="news in newsList" :key="news.id">{{news.title}}</li>
		</ol>
	</div>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		name:'News',
		computed:{
			...mapState(['newsList','persons'])
		},
		methods:{
			handleAdd(){
				this.$store.dispatch('addNews')
			}
		}
	}
</script>

<style scoped>
	.news{
		background-color: orange;
		padding: 20px;
	}
</style>